<template>
	<view class="fullreduce-card">
		<view class="card-header">
			<view class="header-left">
				<cl-tag type="success" size="small">满减</cl-tag>
				<text class="activity-name">{{ promotion.promName }}</text>
			</view>
			<view class="header-right">
				<view class="rules-tag">
					<cl-icon name="tag" size="16" color="#fff"></cl-icon>
					<text class="rules-text">{{ getRulesText() }}</text>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 满减规则展示 -->
			<view class="rules-section">
				<view class="rules-title">
					<cl-icon name="discount" size="20" color="#52c41a"></cl-icon>
					<text class="title-text">满减规则</text>
				</view>
				<view class="rules-list">
					<view v-for="(rule, index) in promotion.details" :key="index" class="rule-item">
						<view class="rule-badge">
							<text class="rule-condition"
								>满{{ Number(rule.taxAmount || 0).toFixed(0) }}元</text
							>
							<cl-icon name="arrow-right" size="16" color="#999"></cl-icon>
							<text class="rule-discount"
								>减{{ Number(rule.dedRate || 0).toFixed(0) }}元</text
							>
						</view>
						<view v-if="rule.goods && rule.goods.length > 0" class="rule-goods">
							<text class="goods-label">参与商品：</text>
							<text class="goods-count">{{ rule.goods.length }}个商品</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 参与商品展示 -->
			<view v-if="participatingGoods.length > 0" class="goods-section">
				<view class="section-title">
					<cl-icon name="shopping-bag" size="20" color="#52c41a"></cl-icon>
					<text class="title-text">参与商品</text>
					<text class="goods-total">共{{ participatingGoods.length }}个</text>
				</view>

				<scroll-view class="goods-scroll" scroll-x>
					<view class="goods-list">
						<view
							v-for="(goods, index) in displayGoods"
							:key="index"
							class="goods-item"
							@tap="goToGoodsDetail(goods)"
						>
							<cl-image
								:src="'https://shop.sdamdyy.cn/' + (goods.mainPic || '')"
								:alt="goods.title"
								class="goods-image"
								width="160rpx"
								height="160rpx"
								mode="aspectFill"
								:lazy-load="true"
								fallback="/static/empty/no.jpg"
							/>
							<text class="goods-name">{{ goods.title || "商品名称" }}</text>
							<text class="goods-price" v-if="userStore.token">{{
								formatUserPrice(goods.price, userStore, goods.noDiscounts)
							}}</text>
							<text class="goods-price" v-else>登录查看</text>
						</view>
					</view>
				</scroll-view>

				<view v-if="participatingGoods.length > 6" class="view-all" @tap="viewAllGoods">
					<text class="view-text">查看全部商品</text>
					<cl-icon name="arrow-right" size="20" color="#52c41a"></cl-icon>
				</view>
			</view>

			<!-- 购买入口 -->
			<view class="action-area">
				<view class="tips">
					<cl-icon name="info" size="16" color="#ff9800"></cl-icon>
					<text class="tips-text">将满足条件的商品加入购物车即可享受优惠</text>
				</view>
				<cl-button type="success" size="medium" round @tap="goShopping"> 去凑单 </cl-button>
			</view>
		</view>

		<!-- 活动信息 -->
		<view class="footer-info">
			<view class="info-item">
				<cl-icon name="time" size="14" color="#999"></cl-icon>
				<text class="info-text">{{ formatActivityTime() }}</text>
			</view>
			<view class="info-item">
				<cl-icon name="check" size="14" color="#52c41a"></cl-icon>
				<text class="info-text">自动叠加优惠</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useCool } from "/@/cool";
import { useStore } from "/@/cool/store";
import { formatUserPrice } from "/@/utils/price";
import dayjs from "dayjs";

const { router } = useCool();
const { user: userStore } = useStore();

const props = defineProps<{
	promotion: any;
}>();

const emit = defineEmits(["join"]);

// 参与商品列表
const participatingGoods = computed(() => {
	if (!props.promotion.details) return [];
	const goods: any[] = [];
	props.promotion.details.forEach((rule: any) => {
		if (rule.goods && Array.isArray(rule.goods)) {
			goods.push(...rule.goods);
		}
	});
	// 去重
	const uniqueGoods = goods.filter(
		(item, index, self) => index === self.findIndex((g) => g.id === item.id)
	);
	return uniqueGoods;
});

// 展示的商品（最多6个）
const displayGoods = computed(() => {
	return participatingGoods.value.slice(0, 6);
});

// 获取规则文本
function getRulesText(): string {
	if (!props.promotion.details || props.promotion.details.length === 0) {
		return "暂无规则";
	}
	const rule = props.promotion.details[0];
	return `满${Number(rule.taxAmount || 0).toFixed(0)}减${Number(rule.dedRate || 0).toFixed(0)}`;
}

// 跳转到商品详情
function goToGoodsDetail(goods: any) {
	router.push(`/pages/goods/detail?id=${goods.id}`);
}

// 查看全部商品
function viewAllGoods() {
	// 跳转到商品列表页，带上促销参数
	router.push(`/pages/goods/list?promotionId=${props.promotion.billNo}&promotionType=fullreduce`);
}

// 去凑单
function goShopping() {
	if (participatingGoods.value.length > 0) {
		// 有指定商品，跳转到商品列表
		viewAllGoods();
	} else {
		// 全场通用，跳转到首页
		router.push("/pages/index/index");
	}
}

// 格式化活动时间
function formatActivityTime(): string {
	const start = dayjs(props.promotion.startTime);
	const end = dayjs(props.promotion.endTime);
	return `${start.format("MM/DD")} - ${end.format("MM/DD")}`;
}
</script>

<style lang="scss" scoped>
.fullreduce-card {
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
		color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			gap: 12rpx;

			.activity-name {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.rules-tag {
			display: flex;
			align-items: center;
			gap: 6rpx;
			background: rgba(255, 255, 255, 0.2);
			padding: 8rpx 16rpx;
			border-radius: 20rpx;

			.rules-text {
				font-size: 26rpx;
			}
		}
	}

	.content {
		padding: 24rpx;

		.rules-section {
			margin-bottom: 32rpx;

			.rules-title {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-bottom: 16rpx;

				.title-text {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
				}
			}

			.rules-list {
				background: #f5f9f5;
				border-radius: 12rpx;
				padding: 16rpx;

				.rule-item {
					padding: 12rpx;
					border-bottom: 1px dashed #e8f5e8;

					&:last-child {
						border-bottom: none;
					}

					.rule-badge {
						display: flex;
						align-items: center;
						gap: 12rpx;
						margin-bottom: 8rpx;

						.rule-condition {
							font-size: 28rpx;
							color: #52c41a;
							font-weight: 500;
						}

						.rule-discount {
							font-size: 32rpx;
							color: #ff6b6b;
							font-weight: bold;
						}
					}

					.rule-goods {
						display: flex;
						align-items: center;
						gap: 8rpx;
						font-size: 24rpx;

						.goods-label {
							color: #999;
						}

						.goods-count {
							color: #52c41a;
						}
					}
				}
			}
		}

		.goods-section {
			margin-bottom: 32rpx;

			.section-title {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-bottom: 16rpx;

				.title-text {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
					flex: 1;
				}

				.goods-total {
					font-size: 26rpx;
					color: #999;
				}
			}

			.goods-scroll {
				height: 240rpx;

				.goods-list {
					display: flex;
					gap: 16rpx;
					padding: 4rpx;
				}

				.goods-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 160rpx;
					flex-shrink: 0;

					.goods-image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
						margin-bottom: 8rpx;
					}

					.goods-name {
						font-size: 24rpx;
						color: #333;
						text-align: center;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						width: 100%;
					}

					.goods-price {
						font-size: 26rpx;
						color: #ff6b6b;
						font-weight: 500;
					}
				}
			}

			.view-all {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8rpx;
				margin-top: 16rpx;
				padding: 12rpx;

				.view-text {
					font-size: 26rpx;
					color: #52c41a;
				}
			}
		}

		.action-area {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f5f9f5;
			border-radius: 12rpx;
			padding: 16rpx;

			.tips {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex: 1;

				.tips-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.footer-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 24rpx;
		background: #f8f8f8;

		.info-item {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.info-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
